/*************************************************************/
/* 图片资源样式 */
/*************************************************************/

// 导入全局变量
@import "../../assets/styles/global-variable.less";

// 资源面板列表
.ResourceListPanel {
    // 资源数量统计
    .resource-counter {
        width: 100%;
        padding: 8px 0;
        margin: 0 auto;
        background-image: radial-gradient(
            66% 32px ellipse at center 60%,
            fade(@theme-color, 76%),
            fade(@theme-color, 52%), 
            fade(@theme-color, 25%)
        );
        text-align: center;
        color: lighten(@theme-color, 65%);
        margin-bottom: 12px;
    }

    // 资源列表
    .resource-list {
        max-width: 4000px;
        padding: @main-container-padding;
        padding-top: 0;
        user-select: none;
        &::after {
            content: '';
            display: block;
            clear: both;
        }
        // 资源列表项
        .resource-item {
            @item-gap: 20px;
            @item-radius: 8px;
            margin-right: @item-gap;
            margin-bottom: @item-gap;
            overflow: hidden;
            float: left;
            background-color: lighten(@theme-color, 68%);
            border: 1px solid lighten(@theme-color, 15%);
            border-radius: @item-radius;
            box-shadow: 0 4px 8px rgba(32, 32, 32, 0.3);
            // 图片容器面板
            .image-panel {
                @panel-height: 336px;
                @figcaption-height: 34px;
                width: 100%;
                height: @panel-height;
                margin: 0;
                .ant-image {
                    width: 100%;
                    height: @panel-height - @figcaption-height;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition: all 0.3s;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-bottom: none;
                        cursor: pointer;
                        display: block;
                    }
                }
                figcaption {
                    height: @figcaption-height;
                    padding: 0 12px;
                    background-color: lighten(@theme-color, 4%);
                    border-top: 1px solid lighten(@theme-color, 14%);
                    text-align: center;
                    font-size: 14px;
                    line-height: @figcaption-height;
                    display: flex;
                    justify-content: space-between;
                    & > div:nth-child(1) {
                        display: flex;
                        & > span {
                            display: block;
                            white-space: nowrap;
                        }
                        & > span:first-child {
                            max-width: 9em;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: lighten(@theme-color, 56%);
                        }
                        & > span:last-child {
                            color: lighten(@theme-color, 42%);
                        }
                    }
                    & > div:nth-child(2) {
                        color: lighten(@theme-color, 32%);
                        font-size: 0.9em;
                    }
                }
            }
            // 操作栏
            .operation-bar {
                padding: 8px 0;
                background-image: linear-gradient(
                    to bottom,
                    lighten(@theme-color, 12%),
                    lighten(@theme-color, 2%)
                );
                border-top: 1px solid @theme-color;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                // 分隔线
                .opretation-divider {
                    box-sizing: content-box;
                    border-left-color: lighten(@theme-color, 10%);
                    border-right: 1px solid darken(@theme-color, 10%);
                }
                // 操作按钮
                div.operation-bar-btn {
                    padding: 2px 0;
                    cursor: pointer;
                    white-space: nowrap;
                    &.copy-link {
                        @btn1-bar-color: #4ae944;
                        color: @btn1-bar-color;
                        &:hover {
                            color: lighten(@btn1-bar-color, 12%);
                        }
                        &:active {
                            color: darken(@btn1-bar-color, 5%);
                        }
                    }
                    &.download-file {
                        @btn2-bar-color: #7bf1ce;
                        color: @btn2-bar-color;
                        &:hover {
                            color: lighten(@btn2-bar-color, 12%);
                        }
                        &:active {
                            color: darken(@btn2-bar-color, 5%);
                        }
                    }
                    &.show-details {
                        @btn3-bar-color: #79b1f1;
                        color: @btn3-bar-color;
                        &:hover {
                            color: lighten(@btn3-bar-color, 12%);
                        }
                        &:active {
                            color: darken(@btn3-bar-color, 5%);
                        }
                    }
                    &.edit-resource {
                        @btn3-bar-color: #e9de44;
                        color: @btn3-bar-color;
                        &:hover {
                            color: lighten(@btn3-bar-color, 12%);
                        }
                        &:active {
                            color: darken(@btn3-bar-color, 5%);
                        }
                    }
                    &.delete-resource {
                        @btn3-bar-color: #fb4949;
                        color: @btn3-bar-color;
                        &:hover {
                            color: lighten(@btn3-bar-color, 12%);
                        }
                        &:active {
                            color: darken(@btn3-bar-color, 5%);
                        }
                    }
                    // 图标
                    span[role="img"] {
                        margin-right: 4px;
                    }
                }
            }
        }
    }
}

/******** 气泡框内容 ********/
.ant-popover-content {
    .ant-popover-inner {
        .ant-popover-title {
            color: #ababab;
        }
        .ant-popover-inner-content {
            .custom-popover {
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                    padding: 4px 8px;
                    margin: 0;
                    cursor: pointer;
                }
                &.copy-resource-link {
                    p {
                        color: darken(#4ae944, 24%);
                        &:hover {
                            color: darken(#4ae944, 18%);
                        }
                        &:active {
                            color: darken(#4ae944, 26%);
                        }
                    }
                }
                .opretation-divider {
                    box-sizing: content-box;
                    border-left-color: #edf6ef;
                    border-right: 1px solid #cad4cc;
                }
            }
        }
    }
}

/******** 响应式设计 ********/

/**** 宽度1500像素以下生效 ****/
@media (max-width: 1500px) {
    .ResourceListPanel {
        @clumn-count: 2;
        .resource-list {
            .resource-item {
                @item-gap: 24px;
                width: calc(100% / @clumn-count - @item-gap / @clumn-count);
                margin-right: @item-gap;
                margin-bottom: @item-gap;
                &:nth-of-type(2n) {
                    margin-right: 0;
                }
            }
        }
    }
}

/**** 宽度1501~2000像素生效 ****/
@media (min-width: 1501px) and (max-width: 2000px) {
    .ResourceListPanel {
        @clumn-count: 3;
        .resource-list {
            .resource-item {
                @item-gap: 32px;
                width: calc(100% / @clumn-count - @item-gap * (@clumn-count - 1) / @clumn-count);
                margin-right: @item-gap;
                margin-bottom: @item-gap;
                &:nth-of-type(3n) {
                    margin-right: 0;
                }
            }
        }
    }
}

/**** 宽度2001~2500像素生效 ****/
@media (min-width: 2001px) and (max-width: 2500px) {
    .ResourceListPanel {
        @clumn-count: 4;
        .resource-list {
            .resource-item {
                @item-gap: 36px;
                width: calc(100% / @clumn-count - @item-gap * (@clumn-count - 1) / @clumn-count);
                margin-right: @item-gap;
                margin-bottom: @item-gap;
                &:nth-of-type(4n) {
                    margin-right: 0;
                }
            }
        }
    }
}

/**** 宽度2501~3200像素生效 ****/
@media (min-width: 2501px) and (max-width: 3200px) {
    .ResourceListPanel {
        @clumn-count: 5;
        .resource-list {
            .resource-item {
                @item-gap: 42px;
                width: calc(100% / @clumn-count - @item-gap * (@clumn-count - 1) / @clumn-count);
                margin-right: @item-gap;
                margin-bottom: @item-gap;
                &:nth-of-type(5n) {
                    margin-right: 0;
                }
            }
        }
    }
}

/**** 宽度3200像素以上生效 ****/
@media (min-width: 3201px) {
    .ResourceListPanel {
        @clumn-count: 6;
        .resource-list {
            .resource-item {
                @item-gap: 48px;
                width: calc(100% / @clumn-count - @item-gap * (@clumn-count - 1) / @clumn-count);
                margin-right: @item-gap;
                margin-bottom: @item-gap;
                &:nth-of-type(6n) {
                    margin-right: 0;
                }
            }
        }
    }
}
